"use client"

import React, { memo } from "react"
import { Box, Typography, Avatar, CircularProgress } from "@mui/material"
import { Person as UserIcon, SmartToy as AssistantIcon } from "@mui/icons-material"
import { Message } from "@/store/useAppStore"
import MarkdownMessage from "./MarkdownMessage"
import ThinkingDisplay from "./ThinkingDisplay"

interface ChatMessageProps {
	message: Message
}

const ChatMessage = memo(function ChatMessage({ message }: ChatMessageProps) {
	const isUser = message.role === "user"
	const isLoading = !isUser && message.content === "正在思考中..."

	return (
		<Box
			sx={{
				display: "flex",
				justifyContent: isUser ? "flex-end" : "flex-start",
				alignItems: "flex-start", // 改为顶部对齐，更自然
				gap: { xs: 1.5, sm: 2 }, // 增加头像与气泡的间距
				mb: { xs: 0.5, sm: 1 } // 添加底部间距，改善消息间的视觉节奏
			}}
		>
			{/* 头像容器 - 用户消息时在右侧 */}
			{!isUser && (
				<Avatar
					sx={{
						bgcolor: "primary.main",
						width: { xs: 32, sm: 36 }, // 稍微增大头像尺寸
						height: { xs: 32, sm: 36 },
						flexShrink: 0, // 防止头像被压缩
						mt: { xs: 0.5, sm: 1 } // 微调头像位置，与气泡顶部对齐
					}}
				>
					<AssistantIcon fontSize='small' />
				</Avatar>
			)}

			{/* 消息气泡 */}
			<Box
				sx={{
					position: "relative",
					px: { xs: 2.5, sm: 3 }, // 增加内边距，让内容更宽松
					py: { xs: 1.5, sm: 2 },
					borderRadius: { xs: 2.5, sm: 3 }, // 稍微增加圆角
					boxShadow: isUser ? "0 3px 12px rgba(25, 118, 210, 0.25)" : "0 2px 8px rgba(0,0,0,0.08)", // 优化阴影效果
					maxWidth: { xs: "80%", sm: "70%" }, // 稍微减小最大宽度，更好的视觉比例
					bgcolor: isUser ? "primary.main" : "background.paper",
					color: isUser ? "primary.contrastText" : "text.primary",
					border: isUser ? "none" : "1px solid",
					borderColor: isUser ? "transparent" : "grey.200",
					transition: "all 0.2s ease-in-out", // 添加过渡效果
					"&:hover": {
						boxShadow: isUser ? "0 4px 16px rgba(25, 118, 210, 0.3)" : "0 3px 12px rgba(0,0,0,0.12)"
					},
					"&::before": {
						// 聊天气泡小尾巴
						content: '""',
						position: "absolute",
						top: { xs: 8, sm: 10 }, // 改为顶部对齐
						width: 0,
						height: 0,
						border: { xs: "5px solid transparent", sm: "6px solid transparent" },
						...(isUser
							? {
									right: { xs: -5, sm: -6 },
									borderLeftColor: "primary.main"
							  }
							: {
									left: { xs: -5, sm: -6 },
									borderRightColor: "background.paper"
							  })
					}
				}}
			>
				{isUser ? (
					<Typography variant='body1' sx={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
						{message.content}
					</Typography>
				) : (
					<Box>
						{/* 思考过程显示 */}
						{message.thinking && <ThinkingDisplay thinking={message.thinking} />}

						{/* 消息内容 */}
						{isLoading ? (
							<Box sx={{ display: "flex", alignItems: "center", gap: 1.5, py: 1.5 }}>
								<CircularProgress
									size={18}
									sx={{
										color: "primary.main",
										"& .MuiCircularProgress-circle": {
											strokeLinecap: "round"
										}
									}}
								/>
								<Typography variant='body2' color='text.secondary' sx={{ fontStyle: "italic" }}>
									正在生成回复...
								</Typography>
							</Box>
						) : (
							<MarkdownMessage content={message.content} />
						)}
					</Box>
				)}
			</Box>

			{/* 用户头像 - 在右侧 */}
			{isUser && (
				<Avatar
					sx={{
						bgcolor: "grey.300",
						width: { xs: 32, sm: 36 },
						height: { xs: 32, sm: 36 },
						flexShrink: 0,
						mt: { xs: 0.5, sm: 1 }
					}}
				>
					<UserIcon fontSize='small' />
				</Avatar>
			)}
		</Box>
	)
})

export default ChatMessage
